import { Form, Input, Radio } from 'antd';
import ProForm, {
  ProFormDigit,
  ProFormRadio,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-form';

import { Grid } from '@r-magician/ui';
import IconSelector from '@/components/IconSelector';
import MenuSelector from '@/components/MenuSelector';
import React from 'react';
import { menuTypeOptions } from '@/lib/enums';

const validateMessages = {
  required: '${label}不能为空',
};

const MenuForm = ({ form, treeData, editable }) => {
  return (
    <ProForm
      initialValues={{
        parentId: 0,
      }}
      submitter={{ render: () => null }}
      validateMessages={validateMessages}
      form={form}
    >
      <Grid col={2} gutter={20}>
        <ProFormText
          label="菜单名称"
          name="name"
          rules={[{ required: true }]}
        />
        <ProFormText
          label="菜单编码"
          name="code"
          disabled={editable}
          rules={[{ required: true }]}
        />
      </Grid>
      <Grid col={2} gutter={20}>
        <Form.Item label="父级菜单" name="parentId">
          <MenuSelector treeData={treeData} />
        </Form.Item>
        <ProFormDigit label="排序" name="sort" />
      </Grid>

      <Grid col={2} gutter={20}>
        <ProFormRadio.Group
          label="菜单类型"
          name="type"
          options={menuTypeOptions.getOptions()}
        />
        <Form.Item label="菜单图标" name="icon">
          <IconSelector />
        </Form.Item>
      </Grid>
      <ProFormText label="菜单链接" name="url" />

      <ProFormTextArea rows={5} label="菜单描述" name="description" />
    </ProForm>
  );
};

export default React.memo(MenuForm);
